{% extends 'index.html' %}

{% block title %}实验页{% endblock %}

{% block content_main %}
    {% load static %}
    <script src="{% static 'js/module_click.js' %}"></script>
    <script src="{% static 'js/js_func.js' %}"></script>
    <script src="{% static 'js/form_modal.js' %}"></script>
    <script src="{% static 'js/update_data.js' %}"></script>
    <!-- 引入模态框 -->
    {% include 'modal.html' %}
    <script>
        var csrfToken = "{{ csrf_token }}";
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            window.moduleClick('operate1');  // 初始加载第一个看板

            const toggleBoardBtn = document.getElementById('toggle-board-btn');
            const section3 = document.getElementById('section-3');
            const section3Modal = new bootstrap.Modal(document.getElementById('section-3-modal'));

            toggleBoardBtn.addEventListener('click', function () {

                if (window.getComputedStyle(section3).display === 'none') {
                    section3Modal.show();
                } else {
                    section3Modal.hide();
                }

            });
        });
    </script>
    <div class="modal fade" id="section-3-modal" tabindex="-1" aria-labelledby="section-3-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content" inert> <!-- 使用 inert 来禁止交互 -->
                <div class="modal-header">
                    <h5 class="modal-title" id="section-3-modal-label">看板</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="section-3-modal-body">
                    <!-- Section 3 的内容 -->
                </div>
            </div>
        </div>
    </div>
<!--    <div class="container mt-1" style="max-width: 90%;">-->
    <div class="mt-1 m-4 pt-1 rounded mx-auto" style="width:90%;">
        <div class="row">
            <!-- 切换按钮，点击时展开/折叠 -->
            <div class="border rounded d-md-none p-1" style="background-color: rgba(255, 255, 255, 0.95);">
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleDiv" aria-expanded="false" aria-controls="collapsibleDiv">模型列表</button>
                <button class="btn btn-primary" id="toggle-board-btn" style="bottom: 20px; right: 20px; z-index: 1050;">看板</button>
            </div>
            <!-- Section 1: 列表 -->
            <div class="bg-white col-12 col-md-2 border rounded collapse d-md-block"  id="collapsibleDiv">
                <div class="mt-4 d-flex justify-content-center" style="gap: 1rem;" >
                    <!-- 按钮触发模态框 -->
                    <button type="button" class="btn btn-primary" onclick="openModalWithDefaults('addModal', '')">新增模型</button>

                    <button type="button" class="btn btn-primary" onclick="openModalWithDefaults('refreshData')">刷新数据</button>
                </div>
                <div class="section-1">
                    <ul class="model-list" id="model-list"></ul>
                </div>
            </div>

            <!-- Section 2: 模块 -->
            <div class="zone col-12 col-md-6 border rounded" id="section-2">
              <div class="container mt-4">
                <div class="card mb-4" id="module_1_card">
                    <div class="card-header" onclick="moduleClick('operate1', event)">模型</div>
                    <div class="card-body border rounded p-4 d-flex flex-column" id="module_1" onclick="moduleClick('operate1', event)">
                        <div class="d-flex justify-content-between align-items-center">
                          <h4 class="form-label d-inline" id="md_1_title"></h4>
                          <button class="btn btn-success btn-sm" id="strategy_direction" onclick="change_dir()"></button>
                        </div>
                      <p class="form-control-static d-inline" id="md_1_subtitle"></p>
                    </div>
                </div>
                <div class="card mb-4" id="module_2_card">
                    <div class="card-header" onclick="moduleClick('operate2', event)">数据</div>
                    <div class="card-body d-flex" id="module_2" onclick="moduleClick('operate2', event)">
                        <select class="form-select me-2" id="md_2_select" aria-label="下拉框 B"  onclick="selectClick(event)">
    <!--                      <option selected>{{model_data.lab_var_part2_2.selected_data_ls.0}}</option>-->
    <!--                        {% block content2 %}-->
    <!--                            {% for option in model_data.lab_var_part2_2.selected_data_ls %}-->
    <!--                              <option value="{{option}}">{{option}}</option>-->
    <!--                            {% endfor %}-->
    <!--                        {% endblock %}-->
                        </select>
                        <button class="btn btn-primary" style="width: 4rem;" onclick="load_data()">加载数据</button>
                    </div>
                </div>

                <div class="card mb-4" id="module_3_card">
                    <div class="card-header" onclick="moduleClick('operate3', event)">战法</div>
                    <div class="card-body p-4 border rounded" id="module_3" onclick="moduleClick('operate3', event)">
                        <div class="d-flex justify-content-center align-items-center mb-2">
                            <label class="" style="width: 6rem;">请选择战法</label>
                            <select class="form-select me-2" id="md_3_select" aria-label="下拉框 B" onchange="tactic_change(this, event)" onclick="selectClick(event)">
    <!--                          <option selected>{{model_data.lab_var_part2_3.selected_tactics_ls.0}}</option>-->
    <!--                            {% block content3 %}-->
    <!--                                {% for option in model_data.lab_var_part2_3.selected_tactics_ls %}-->
    <!--                                  <option value="{{option}}">{{option}}</option>-->
    <!--                                {% endfor %}-->
    <!--                            {% endblock %}-->
                            </select>
                        </div>

                        <!-- 横向排列的三个子容器 -->
                        <div class="d-flex justify-content-center">
                            <!-- 子容器 1 -->
                            <div class="flex-column d-flex align-items-center" style="height: 14rem; width: 10rem;">
                                <label class="text-center d-block" style="">过滤</label>
                                <div class="border rounded flex-column d-flex align-items-center px-1 bg-white" id="md_3_cont1" style="height: 12rem; width: 80%;overflow-y: auto;"></div>
                            </div>

                            <!-- 子容器 2 -->
                            <div class="flex-column d-flex align-items-center" style="height: 14rem; width: 10rem;">
                                <label class="text-center d-block">开仓</label>
                                <div class="border rounded flex-column d-flex align-items-center px-1 bg-white" id="md_3_cont2" style="height: 12rem; width: 80%;overflow-y: auto;"></div>
                            </div>

                            <!-- 子容器 3 -->
                            <div class="flex-column d-flex align-items-center" style="height: 14rem; width: 10rem;">
                                <label class="text-center d-block">平仓</label>
                                <div class="border rounded flex-column d-flex align-items-center px-1 bg-white" id="md_3_cont3" style="height: 12rem; width: 80%;overflow-y: auto;"></div>
                            </div>

                        </div>
                        <button class="btn btn-primary d-inline" onclick="tactic_ok()">确认</button>
                    </div>
                </div>

                <div class="card mb-4" id="module_4_card">
                    <div class="card-header" onclick="moduleClick('operate4', event)">因子</div>
                    <div class="card-body p-4 border rounded" id="module_4" onclick="moduleClick('operate4', event)">
                        <div class="border p-2 mb-2 bg-white" id="md_4_div"></div>
                        <button class="btn btn-primary d-inline" onclick="get_factor()">确认</button>
                    </div>
                </div>

                <div class="card mb-4" id="module_5_card">
                    <div class="card-header" onclick="moduleClick('operate5', event)">回测</div>
                    <div class="card-body p-4 rounded d-flex flex-column" id="module_5" onclick="moduleClick('operate5', event)">
                        <button class="btn btn-success my-3" onclick="start_backtest()">实验开始</button>
                    </div>
                </div>

              </div>
            </div>

            <!-- Section 3: 自定义内容 -->
            <div class="bg-white col-12 col-md-4 border rounded d-md-block" id="section-3">
                <div class="operate_container container" id="operate_container" style="width: 100%;padding-top: 1rem">
<!--                    <h2>操作台</h2>-->
                </div>
            </div>
        </div>
    </div>

{% endblock %}


